import mountElement from "./mountElement"
import updateNodeElement from "./updateNodeElement"

export default function createDOMElement(virtualDOM) {  
  let newElement = null
  // 判断是节点是文本节点还是元素节点，然后分别处理
  if (virtualDOM.type === 'text') {
    // 文本节点
    newElement = document.createTextNode(virtualDOM.props.textContent)
  } else {
    // 元素节点
    newElement = document.createElement(virtualDOM.type)
    // 为元素添加对应的属性
    updateNodeElement(newElement, virtualDOM)
  }

  // 给真实渲染到页面上的dom对象添加一个_virtualDOM的属性，用来做更新前的旧的virtualDOM存储
  newElement._virtualDOM = virtualDOM

  // 递归创建子节点
  virtualDOM.children.forEach(child => {
    mountElement(child, newElement)
  })

  return newElement
}